@import "themes/var";

.el-input-number {
  .el-input-number__decrease {
    color: $input-font-color;
    background: $input-bgcolor;
    border-right: $border-outline;

    &:not(.is-disabled):hover {
      z-index: 2;
      color: $input-color-hover;
      border-color: $input-color-hover;
    }
  }

  .el-input-number__increase {
    color: $input-font-color;
    background: $input-bgcolor;
    border-left: $border-outline;

    &:not(.is-disabled):hover {
      z-index: 2;
      color: $input-color-hover;
      border-color: $input-color-hover;
    }
  }

  &.el-input-number--mini {
    .el-input--mini {
      line-height: 26px;
    }
  }
}

.g-input-number {
  width: 100%;

  &.--mini {
    line-height: 26px;
  }

  .el-input-number--mini.is-controls-right {
    width: 100%;

    .el-input-number__decrease {
      top: auto;
      right: 1px;
      bottom: 1px;
      left: auto;
      line-height: 13px;
      border-top: $border-outline;
      border-right: none;
      border-left: $border-outline;
      border-radius: 0 0 4px;
      width: 20px;

      &:not(.is-disabled):hover {
        z-index: 2;
        color: $input-color-hover;
        border-color: $input-color-hover;
      }
    }

    .el-input-number__increase {
      line-height: 13px;
      border-bottom: $border-outline;
      border-radius: 0 4px 0 0;
      width: 20px;

      &:not(.is-disabled):hover {
        z-index: 2;
        color: $input-color-hover;
        border-color: $input-color-hover;
      }
    }

    .el-input {
      .el-input__inner {
        padding-right: 25px;
        padding-left: 7px;
        color: #fff;
        text-align: left;
      }
    }
  }

  &.--inline {
    width: 92px;
    display: inline-block;

    .el-input-number {
      width: 92px;
    }
  }

  &.has-suffix {
    position: relative;

    .el-input-number--mini.is-controls-right {
      .el-input {
        .el-input__inner {
          padding-right: 42px;
        }
      }
    }
  }

  & + & {
    margin-left: 8px;
  }
}

.g-input-number__caption {
  display: block;
  width: 100%;
  font-size: $font-size;
  height: 16px;
  line-height: 16px;
  color: $input-description-font-color;

  @include utils-ellipsis();
}

.g-input-number__suffix {
  position: absolute;
  font-size: 12px;
  color: $input-description-font-color;
  top: 0;
  right: 25px;
  width: 14px;
}
